﻿@page "/DropDown-List/Template"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the template functionalities of the DropDownList. Type a character in the DropDownList element and choose an item from the customized list</p>
</SampleDescription>
<ActionDescription>
   <p>The DropDownList has been provided with several options to customize each list items, group title, header and footer elements.</p>
   <p>This sample uses the following list of templates in DropDownList</p>
    <ul><li><a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListTemplates-1.html#Syncfusion_Blazor_DropDowns_DropDownListTemplates_1_ItemTemplate' target='_blank'> ItemTemplate</a> - To customize the list item's content.</li>
        <li><a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListTemplates-1.html#Syncfusion_Blazor_DropDowns_DropDownListTemplates_1_HeaderTemplate' target='_blank'> HeaderTemplate</a> - To customize the header element.</li>
        <li><a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListTemplates-1.html#Syncfusion_Blazor_DropDowns_DropDownListTemplates_1_ValueTemplate' target='_blank'> ValueTemplate</a> - To customize the value element content that holds the selected item's text.</li>
    </ul>
   <p>More information on the template feature configuration can be found in the <a href='https://blazor.syncfusion.com/documentation/dropdown-list/templates/' target='_blank'> documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section dropdown-height">
    <div class="control-wrapper">
        <div class="padding-top" style='padding-top:55px;'>
            <SfDropDownList TValue="string" TItem="EmployeeData" CssClass="template" Placeholder="Select a customer" DataSource="@Data">
                <DropDownListTemplates TItem="EmployeeData">
                    <ItemTemplate>
                        <div>
                            <img class="empImage" src="images/dropdown-list/employees/@((context as EmployeeData).Eimg).png" alt="employee" />
                            <div class="ename"> @((context as EmployeeData).FirstName) </div>
                            <div class="job"> @((context as EmployeeData).Designation) </div>
                        </div>
                    </ItemTemplate>
                    <HeaderTemplate>
                        <div class="header"> <span>Photo</span> <span class="info">Employee Info</span></div>
                    </HeaderTemplate>
                    <ValueTemplate>
                        <div class="dropdown-width" style="width:100%;height:100%;">
                            <img class="value" src="images/dropdown-list/employees/@((context as EmployeeData).Eimg).png" height="26" width="26" alt="employee">
                            <div class="name"> @((context as EmployeeData).FirstName) </div>
                        </div>
                    </ValueTemplate>
                </DropDownListTemplates>
                <DropDownListFieldSettings Value="FirstName"></DropDownListFieldSettings>
            </SfDropDownList>
        </div>
    </div>
</div>

<style>
    .control-wrapper {
        margin: 0 auto;
        width: 300px;
    }

    .header {
        font-weight: 600;
        color: rgba(0, 0, 0, .54);
        height: 48px;
        padding: 15px 0 0 16px;
        font-size: 16px;
        background-color: #f5f5f5;
        font-family: "Segoe UI", "GeezaPro", "DejaVu Serif";
    }

    .fabric .header {
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        color: #0078d7;
        font-weight: 400;
    }

    .bootstrap .header {
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        color: #777;
        font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
        font-weight: 400;
        font-size: 12px;
        line-height: 30px;
        height: 30px;
        padding: 0 0 0 24px;
    }

    .e-bigger.bootstrap .header {
        line-height: 44px;
        height: 44px;
        font-size: 13px;
    }

    .highcontrast .header {
        color: #fff;
        background-color: #000;
    }

    .bootstrap4 .header {
        color: #6c757d;
    }

    .bootstrap .info,
    .e-bigger.bootstrap .info {
        margin-left: 25px;
    }

    .bootstrap .job {
        opacity: .54;
        font-size: 14px;
        margin-top: -25px;
        margin-bottom: 20px;
    }

    .e-bigger.bootstrap .job {
        font-size: 15px;
        margin-top: -32px;
        margin-bottom: 17px;
    }

    .bootstrap .ename {
        font-size: 15px;
        margin-top: 20px;
        opacity: .87;
        padding: 3px 0 20px;
    }

    .e-bigger.bootstrap .ename {
        font-size: 16px;
        padding-bottom: 15px;
    }

    .bootstrap .empImage,
    .e-bigger.bootstrap .empImage {
        margin: 0px 10px 0 20px;
    }

    .bootstrap .value {
        margin-top: 3px;
        margin-left: 3px;
    }

    .e-bigger.bootstrap .value {
        margin-top: 5px;
        margin-left: 5px;
    }

    .bootstrap .name,
    .bootstrap4 .name {
        padding: 7px 42px;
    }

    .e-bigger.bootstrap .name {
        padding: 12px 42px;
    }

    .info {
        margin-left: 34px;
    }

    .ename {
        display: block !important;
        opacity: .87;
        font-size: 16px;
        margin-top: 8px;
    }

    .name {
        padding: 5px 42px;
        opacity: .87;
        line-height: 1.063em;
    }

    .job {
        opacity: .54;
        font-size: 14px;
        margin-top: -15px;
        margin-bottom: 7px;
    }

    .empImage {
        margin: 6px 16px;
        float: left;
        width: 50px;
        height: 50px;
    }

    .value {
        border-radius: 50%;
        float: left;
        margin-top: 2px;
        margin-left: 2px;
    }

    .e-bigger:not(.bootstrap) .value {
        margin-top: 7px;
    }

    .e-bigger:not(.bootstrap) .name {
        padding: 11px 42px;
    }

    .template.e-popup .e-list-item * {
        display: block;
        text-indent: 0;
    }

    .e-bigger:not(.bootstrap) .template .e-dropdownbase .e-list-item {
        line-height: 42px;
        height: 80px;
    }

    .e-bigger:not(.bootstrap) .template.e-popup .empImage {
        margin: 10px 16px;
    }

    .bootstrap4 .template.e-popup .empImage {
        margin: 0px 16px;
    }

    .bootstrap4 .template.e-popup .job {
        margin-top: 0;
    }

    .e-bigger.bootstrap4 .template.e-popup .job {
        margin-top: -15px;
    }

    .template .e-dropdownbase.e-content {
        max-height: 200px !important;
    }

    .dropdown-height {
        height: 400px;
    }

    .padding-top {
        padding-top: 55px;
    }

    .dropdown-width {
        width: 100%;
        height: 100%;
    }
</style>

@code {

    Type models = typeof(EmployeeData);
    public class EmployeeData
    {
        public string FirstName { get; set; }
        public string Designation { get; set; }
        public string Eimg { get; set; }
    }
    List<EmployeeData> Data = new List<EmployeeData>
{
        new EmployeeData() { FirstName = "Andrew Fuller",  Designation = "Team Lead", Eimg= "7" },
        new EmployeeData() { FirstName = "Anne Dodsworth", Designation = "Developer", Eimg= "1" },
        new EmployeeData() { FirstName = "Janet Leverling", Designation = "HR", Eimg= "3" },
        new EmployeeData() { FirstName = "Laura Callahan", Designation = "Product Manager", Eimg= "2" },
        new EmployeeData() { FirstName = "Margaret Peacock", Designation = "Developer", Eimg= "6" },
        new EmployeeData() { FirstName = "Michael Suyama", Designation = "Team Lead", Eimg= "9" },
        new EmployeeData() { FirstName = "Nancy Davolio", Designation = "Product Manager", Eimg= "4" },
        new EmployeeData() { FirstName = "Robert King", Designation = "Developer", Eimg= "8" },
        new EmployeeData() { FirstName = "Steven Buchanan", Designation = "CEO", Eimg= "10" },
    };
}